<template>
	<!-- 产品库 -->
	<view class="page-two-list">
		<!-- 广告位 -->
		<view class="advertising">
			<swiper class="ad-swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item, index) in advertising" :key="index">
					<image :src="item" mode="scaleToFill" style="width: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 搜索框，广告栏下方，独立一行 -->
		<view class="filter-bar">
		<!-- 	<view class="filter-bar-left">
				<view class="region-selector" @click="showRegionPicker = true">
					<text class="region-text">{{ selectedRegion || '选择地区' }}</text>
					<image class="arrow-icon" src="/static/images/revise.svg" mode="widthFix"></image>
				</view>
			</view> -->
			<view class="filter-bar-right" style="margin-left: 0;">
				<image class="search-icon" src="/static/images/search_icon.png" mode="widthFix"></image>
				<input class="filter-input" placeholder="请输入产品名称搜索" v-model="searchQuery" @confirm="searchConfirm" />
				
			</view>
		</view>
		
		<!-- 地区选择器弹窗 -->
		<uni-popup ref="regionPopup" type="bottom" :mask-click="true" @change="onPopupChange">
			<view class="region-picker">
				<view class="picker-header">
					<text class="picker-title">选择地区</text>
					<text class="picker-close" @click="showRegionPicker = false">完成</text>
				</view>
				<view class="picker-content">
					<scroll-view class="region-list" scroll-y="true">
						<view class="region-item" @click="selectRegion('全国')">
							<text class="region-name">全国</text>
							<image v-if="selectedRegion === '全国'" class="check-icon" src="/static/images/smilingface.svg" mode="widthFix"></image>
						</view>
						<view 
							v-for="(province, index) in pcaData" 
							:key="index"
							class="region-item"
							@click="selectProvince(province)"
						>
							<text class="region-name">{{ province.text }}</text>
							<image v-if="selectedRegion === province.text" class="check-icon" src="/static/images/smilingface.svg" mode="widthFix"></image>
							<image v-else-if="selectedProvince === province.text" class="arrow-right" src="/static/images/revise.svg" mode="widthFix"></image>
						</view>
					</scroll-view>
					
					<!-- 城市选择 -->
					<scroll-view v-if="selectedProvince && selectedProvince !== '全国'" class="city-list" scroll-y="true">
						<view class="region-item" @click="selectRegion(selectedProvince)">
							<text class="region-name">{{ selectedProvince }}（全省）</text>
							<image v-if="selectedRegion === selectedProvince" class="check-icon" src="/static/images/smilingface.svg" mode="widthFix"></image>
						</view>
						<view 
							v-for="(city, index) in currentCities" 
							:key="index"
							class="region-item"
							@click="selectRegion(city.text)"
						>
							<text class="region-name">{{ city.text }}</text>
							<image v-if="selectedRegion === city.text" class="check-icon" src="/static/images/smilingface.svg" mode="widthFix"></image>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<!-- 左右布局：左侧分类 + 右侧内容 -->
		<view class="page-two-main-flex">
			<!-- 左侧分类 -->
			<view class="left-filter">
				<view
					v-for="(item, index) in pupItemData"
					:key="index"
					class="filter-button"
					:class="{ 'filter-button-active': selectedFilter === item.text, 'long-text': item.text.length >= 5 }"
					@click="selectFilter(item.text)"
				>
					{{ item.text }}
				</view>
			</view>
			<!-- 右侧内容 -->
			<view class="right-content">
				<!-- 列表内容区域 -->
				<scroll-view 
					class="scroll-container" 
					scroll-y="true" 
					@scrolltolower="loadMore"
					refresher-enabled="true"
					:refresher-triggered="refreshing"
					@refresherrefresh="onRefresh"
				>
					<view v-if="cpkData.length > 0" class="content">
						<cpk :cpkData="cpkData"></cpk>
					</view>
					<view class="zwxx-img" v-if="cpkData.length === 0 && !loading">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/zwxx.png" mode="widthFix">
						</image>
						<view>暂无数据</view>
					</view>
					<!-- 加载更多提示 -->
					<view v-if="cpkData.length > 0" class="load-more">
						<view v-if="loading" class="loading-text">加载中...</view>
						<view v-else-if="hasMore" class="load-more-text">上拉加载更多</view>
						<view v-else class="no-more-text">没有更多数据了</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import Cpk from '../../components/Cpk.vue'; // 产品库
	import pcaData from '../../api/pca-code.json'; // 省市数据
	
	export default {
		components: {
			Cpk
		},
		data() {
			return {
				advertising: [],
				pupItemData: [{
					text: '全部',
					"active": true
				}, {
					text: '火爆区',
					"active": false
				}, {
					text: '社保类',
					"active": false
				}, {
					text: '个税类',
					"active": false
				}, {
					text: '公积金',
					"active": false
				}, {
					text: '花白户',
					"active": false
				}, {
					text: '技术类',
					"active": false
				}, {
					text: '商户贷',
					"active": false
				}, {
					text: '企业贷',
					"active": false
				}, {
					text: '税票贷',
					"active": false
				}, {
					text: '按揭房',
					"active": false
				}, {
					text: '按揭车',
					"active": false
				}, {
					text: '抵押类',
					"active": false
				}, {
					text: '学历类',
					"active": false
				}], // 产品分类
				searchQuery: '', // 搜索内容
				selectedFilter: '全部', // 筛选默认全部
				cpkData: [],
				// 分页相关
				pageNum: 1,
				pageSize: 5,
				hasMore: true,
				loading: false,
				refreshing: false,
				// 地区选择相关
				pcaData: pcaData, // 省市数据
				selectedRegion: '', // 选中的地区
				selectedProvince: '', // 选中的省份
				currentCities: [], // 当前省份的城市列表
				showRegionPicker: false // 是否显示地区选择器
			}
		},
		onShow() {
			this.resetPagination()
			this.getCpk() // 产品库
			this.getBannerList() // 获取广告位
		},
		watch: {
			showRegionPicker(newVal) {
				if (newVal) {
					this.$refs.regionPopup.open()
				} else {
					this.$refs.regionPopup.close()
				}
			}
		},
		methods: {
			// 获取广告位
			async getBannerList() {
				const res = await this.$api.getBannerList()
				if (res.succ) {
					const targetBanner = res.data.find(item => item.zsggw === '产品库')
					this.advertising = targetBanner ? targetBanner.tpList : [
						'https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/banner1.png'
					]
				}
			},
			// 获取产品库
			async getCpk(isLoadMore = false) {
				if (this.loading) return
				
				this.loading = true
				
				let params = {
					onlineFlag: 1 // 上线
				}
				
				// 处理地区筛选
				if (this.selectedRegion) {
					if (this.selectedRegion === '全国') {
						params.accessProvince = ''
						params.accessCity = ''
					} else {
						// 检查是否是省份
						const province = this.pcaData.find(p => p.text === this.selectedRegion)
						if (province) {
							// 是省份
							params.accessProvince = this.selectedRegion
							params.accessCity = ''
						} else {
							// 是城市，需要找到对应的省份
							for (const p of this.pcaData) {
								if (p.children) {
									const city = p.children.find(c => c.text === this.selectedRegion)
									if (city) {
										params.accessProvince = p.text
										params.accessCity = this.selectedRegion
										break
									}
								}
							}
						}
					}
				}
				
				// 处理产品名称搜索
				if (this.searchQuery && this.searchQuery.trim() !== '') {
					params.keyword = this.searchQuery.trim()
				}
				
				// 根据筛选条件设置不同的参数
				if (this.selectedFilter === '火爆区') {
					params.hotZoneFlag = 1
				} else if (this.selectedFilter === '全部') {
					// 全部不需要额外参数
				} else {
					// 其他分类（社保类、个税类、公积金等）
					params.categoryList = [this.selectedFilter]
				}
				
				let data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					params: params
				}
				
				try {
					const res = await this.$api.getCpkData(data)
					if (res.succ) {
						if (isLoadMore) {
							// 加载更多，追加数据
							this.cpkData = [...this.cpkData, ...res.data.list]
						} else {
							// 首次加载或刷新，替换数据
							this.cpkData = res.data.list
						}
						
						// 判断是否还有更多数据
						this.hasMore = res.data.list.length === this.pageSize
					}
				} catch (error) {
					console.error('获取产品资源失败:', error)
				} finally {
					this.loading = false
					if (this.refreshing) {
						this.refreshing = false
					}
				}
			},
								// 选择筛选条件
			selectFilter(filter) {
				console.log(filter)
				this.selectedFilter = filter
				this.resetPagination()
				this.getCpk()
			},
			// 搜索确认
			searchConfirm() {
				this.resetPagination()
				this.getCpk()
			},
			// 重置分页
			resetPagination() {
				this.pageNum = 1
				this.hasMore = true
				this.cpkData = []
			},
			// 下拉刷新
			async onRefresh() {
				this.refreshing = true
				this.resetPagination()
				await this.getCpk()
			},
			// 上拉加载更多
			async loadMore() {
				if (this.loading || !this.hasMore) return
				
				this.pageNum++
				await this.getCpk(true)
			},
			// 选择省份
			selectProvince(province) {
				this.selectedProvince = province.text
				this.currentCities = province.children || []
			},
			// 选择地区
			selectRegion(region) {
				this.selectedRegion = region
				this.showRegionPicker = false
				this.resetPagination()
				this.getCpk()
			},
			// 弹窗状态变化
			onPopupChange(e) {
				if (!e.show) {
					this.showRegionPicker = false
				}
			}
		}
	}
</script>

<style lang="less">
	.search-bar {
		position: relative;
		background: #F5F5F5;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		margin: 0 0 20rpx 0;
		box-sizing: border-box;

		.search-input {
			width: 100%;
			height: 60rpx;
			padding-left: 60rpx;
			font-size: 28rpx;
			box-sizing: border-box;
		}

		.search-icon {
			position: absolute;
			left: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 32rpx;
		}
	}

	.page-two-main-flex {
		display: flex;
		flex: 1;
		overflow: hidden;
	}
	.left-filter {
		width: 140rpx;
		height: 100%;
		overflow: auto;
		background: #fff;
		border-right: 1px solid #f0f0f0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding-top: 20rpx;
		box-sizing: border-box;
		margin-left: 30rpx;
		.filter-button {
			width: 100%;
			margin: 0 0 10rpx 0;
			border-radius: 0;
			text-align: center;
			background: #f8f8f8;
			color: #ac6c17;
			font-size: 28rpx;
			padding: 24rpx 0;
			&:active {
				transform: scale(0.98);
			}
			&.filter-button-active {
				background: linear-gradient(138deg, #F3B359 0%, #EC6A34 100%);
				color: #fff;
			}
			&.long-text {
				font-size: 24rpx;
			}
		}
	}
	.right-content {
		flex: 1;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		margin-right: 20rpx;
	}

	.filter-buttons {
		display: flex;
		flex-wrap: wrap;
		// margin-bottom: 30rpx;
		margin-top: 30rpx;
		padding: 10rpx 30rpx;
	}

	.filter-button {
		width: calc(25% - 8rpx);
		padding: 15rpx 0;
		background: #FFEFD9;
		border-radius: 32rpx;
		font-size: 28rpx;
		color: #AC6C17;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		text-align: center;
		margin-bottom: 16rpx;
		margin-right: 8rpx;

		&:active {
			transform: scale(0.98);
		}

		&.filter-button-active {
			background: linear-gradient(138deg, #F3B359 0%, #EC6A34 100%);
			color: #FFFFFF;
		}

		&.long-text {
			font-size: 24rpx;
		}
	}

	.zwxx-img {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;

		image {
			width: 320rpx;
			margin-bottom: 20rpx;
		}

		view {
			color: #999;
			font-size: 28rpx;
		}
	}

	.scroll-container {
		height: 100%;
	}

	.load-more {
		text-align: center;
		padding: 0 0 30rpx;
		
		.loading-text, .load-more-text, .no-more-text {
			font-size: 28rpx;
			color: #999;
		}
		
		.loading-text {
			color: #666;
		}
		
		.no-more-text {
			color: #ccc;
		}
	}

	.page-two-list {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.advertising {
			margin: 30rpx 30rpx 0;
			padding: 0;
			border-radius: 12rpx;

			.ad-swiper {
				width: 100%;
				height: 300rpx;
				border-radius: 12rpx;
			}

			.ad-swiper swiper-item {
				width: 100%;
				height: 100%;
			}

			.ad-swiper swiper-item image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
	}
	.page-two-list{
		.cpk-list{
			padding: 0 30rpx 20rpx 20rpx !important;
			.left {
				width: 120rpx !important;
				image {
					width: 120rpx !important;
					height: 120rpx !important;
				}
			}
			 .row .right .row .block::after{
				 width: 0 !important;
			 }
			 
		}
		
	}
	
	// 搜索框样式
	.filter-bar {
		padding: 20rpx 0;
		background: #fff;
		display: flex;
		align-items: center;
		gap: 20rpx;
		
		.filter-bar-left {
			flex-shrink: 0;
			
			.region-selector {
				display: flex;
				align-items: center;
				background: linear-gradient(138deg, #F3B359 0%, #EC6A34 100%);
				border-radius: 30rpx;
				padding: 15rpx 25rpx;
				min-width: 160rpx;
				
				.region-text {
					color: #fff;
					font-size: 28rpx;
					margin-right: 10rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 120rpx;
				}
				
				.arrow-icon {
					width: 24rpx;
					height: 24rpx;
					filter: brightness(0) invert(1);
				}
			}
		}
		
		.filter-bar-right {
			flex: 1;
			position: relative;
			background: #F5F5F5;
			border-radius: 30rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
	
			.filter-input {
				flex: 1;
				padding: 10rpx;
				font-size: 28rpx;
				border: none;
				background: transparent;
			}
			
			.search-icon {
				margin-left: 20rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	
	// 地区选择器样式
	.region-picker {
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		max-height: 80vh;
		
		.picker-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1px solid #f0f0f0;
			
			.picker-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
			
			.picker-close {
				font-size: 28rpx;
				color: #F3B359;
				padding: 10rpx 20rpx;
			}
		}
		
		.picker-content {
			display: flex;
			max-height: 60vh;
			
			.region-list, .city-list {
				flex: 1;
				max-height: 60vh;
				
				.region-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 25rpx 30rpx;
					border-bottom: 1px solid #f8f8f8;
					
					&:active {
						background: #f8f8f8;
					}
					
					.region-name {
						font-size: 30rpx;
						color: #333;
					}
					
					.check-icon {
						width: 32rpx;
						height: 32rpx;
					}
					
					.arrow-right {
						width: 24rpx;
						height: 24rpx;
						transform: rotate(90deg);
					}
				}
			}
			
			.city-list {
				border-left: 1px solid #f0f0f0;
			}
		}
	}
</style>